<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" status-icon label-position="right" class="demo-form-inline"
               label-width="130px" style="display: flex;">
        <div style="flex: 1">
          <el-form-item label="用户登录名称：" prop="useName">
            <el-input v-model="listQuery.useName" placeholder="用户登录名称"/>
          </el-form-item>
          <el-form-item label="注册开始日期：" prop="regStartDate">
            <el-date-picker
              v-model="listQuery.regStartDate"
              type="date"
              placeholder="注册开始日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否已实名认证：" prop="isChecked">
            <el-radio v-model="listQuery.isChecked" label="0">未实名</el-radio>
            <el-radio v-model="listQuery.isChecked" label="1">已实名</el-radio>
          </el-form-item>
        </div>
        <div style="flex: 1">
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="手机号"/>
          </el-form-item>
          <el-form-item label="注册结束日期：" prop="regEndDate">
            <el-date-picker
              v-model="listQuery.regEndDate"
              type="date"
              placeholder="注册结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="flex: 1">
          <el-form-item label="真实姓名：" prop="realName">
            <el-input v-model="listQuery.realName" placeholder="真实姓名"/>
          </el-form-item>
          <el-form-item label="上级推广用户：" prop="upUserName">
            <el-input v-model="listQuery.upUserName" placeholder="上级推广用户"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          </el-form-item>
        </div>
      </el-form>

      <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="130" label="用户登录名称" prop="userName"/>
        <el-table-column align="left" min-width="110" label="手机号" prop="mobile"/>
        <!--<el-table-column align="center" min-width="120" label="最后登录时间" prop="timeLastLogin"/>
        <el-table-column align="center" min-width="100" label="最后登录IP地址" prop="lastLoginIP"/>
        <el-table-column align="center" min-width="120" label="创建时间" prop="timeAdd"/>
        <el-table-column align="center" min-width="100" label="用户是否锁住" prop="isLocked"/>
        <el-table-column align="center" min-width="100" label="用户锁住时间" prop="timeLocked"/>-->
        <el-table-column align="left" min-width="100" label="是否已实名认证" prop="isChecked">
          <template slot-scope="scope">
            <!--{{{ "0":"未实名", "1":"已实名" }[ scope.row.isChecked ]}}-->
            <span v-if="scope.row.isChecked == '1'" style="color: #409eff">
              已实名
            </span>
            <span v-else>
              未实名
            </span>
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="100" label="真实姓名" prop="realName"/>
        <el-table-column align="left" min-width="140" label="银行账户号" prop="account"/>
        <el-table-column align="left" min-width="100" label="上级推广用户" prop="upUserName"/>
        <el-table-column align="left" min-width="120" label="当前未提现佣金(元)" prop="commission"/>
        <el-table-column align="left" min-width="100" label="是否绑定微信" prop="bindEchat">
          <template slot-scope="scope">
            {{{ "0":"未绑定", "1":"绑定" }[ scope.row.bindEchat ]}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="200"
              trigger="manual"
              :ref="'popover-' + scope.row.userName">
              <p>确定设置该用户查看佣金吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.userName].doClose()">取消</el-button>
                <el-button type="primary" size="mini" @click="handleEdit(scope.row)">确定</el-button>
              </div>
              <el-button type="text" size="mini" slot="reference"
                         @click="$refs[`popover-` + scope.row.userName].doShow()">设置可查看佣金</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        regStartDate: undefined,
        regEndDate: undefined,
        useName: undefined,
        mobile: undefined,
        realName: undefined,
        upUserName: undefined,
        isChecked: '0'
      },
      listLoading: true,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('usersearch.html?op=search', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.data.totalcount
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleEdit(row) {
      this.editForm = {
        userName: row.userName,
        isSeeCommission: '1'
      }
      doGet('usersearch.html?op=setCommissionPower', this.editForm)
        .then(response => {
          this.queryList()
          this.$notify.success({
            title: '成功',
            message: '设置成功'
          })
          this.$refs[`popover-` + row.userName].doClose()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.message
          })
        })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
